<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item  in swipe" :key="item.img"><img :src="item.banner" alt=""></van-swipe-item>
    </van-swipe>
    <van-icon name="scan" class='erweima' size="40" color="#ccc" @click="goSaoMa" />
    <van-cell-group inset>
      <van-cell icon="location-o" title="青年汇店" value="内容" label="据您53米">
        <template #default>
          <div class="paymethod">
            <span :class="change1 ? 'actives' : 'color'" @click="changeColor1">自提</span>
            <span :class="change2 ? 'actives' : 'color'" @click="changeColor2">外送</span>
          </div>
        </template>
      </van-cell>
      <van-cell title="现在下单" label="OREDR NOW" :to="gopay">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="shop-collect-o" class="search-icon" size="30px" />
        </template>
      </van-cell>
      <van-cell title="咖啡钱包" label="COFFRR WALLET" :to="gowallet">
        <template #right-icon>
          <van-icon name="idcard" class="search-icon" size="30px" />
        </template>
      </van-cell>
      <van-cell title="送她咖啡" label="SEND COFFEE" :to="giveHerCoffee">
        <template #right-icon>
          <van-icon name="goods-collect-o" class="search-icon" size="30px" />
        </template>
      </van-cell>
      <van-cell title="企业账户" label="ENTERPRISE ACCOUNT" to="accounts">
        <template #right-icon>
          <van-icon name="newspaper-o" class="search-icon" size="30px" />
        </template>
      </van-cell>
    </van-cell-group>
    <van-image width="100%" height="100%"
      src="https://tse3-mm.cn.bing.net/th/id/OIP-C.7FpLSk8e26NtpBH97cnd3wHaEK?w=319&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" />
  </div>
  <FooterVue></FooterVue>
</template>

<script setup>
import { useHomeHandler } from '@/hooks/home/useHome'
import FooterVue from '@/components/home/footer/Footer.vue';
const { change1, change2, swipe, changeColor1, changeColor2, gopay, gowallet, giveHerCoffee, goSaoMa } = useHomeHandler()
</script>

<style lang="scss" scoped>
.home {
  background-color: #fff;

  .van-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 200px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .erweima {
    position: absolute;
    top: 20px;
    right: 20px;

  }

  .paymethod {

    border: 1px solid #39a9ed;
    padding: 8px;
    box-sizing: border-box;
    margin-left: 60px;
    border-radius: 100px;
    display: flex;
    justify-content: space-around;

    .color {
      color: #39a9ed;
    }

    .actives {
      background-color: cornflowerblue;
      color: #fff;
      border-radius: 10px;
      padding-left: 5px;
      padding-right: 2.5px;

    }

  }

  .van-image {
    margin-bottom: 60px;
  }

}
</style>